<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>标签组件</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../../component/pear/css/pear.css" />
</head>

<body class="pear-container">
  <div class="layui-row layui-col-space10">
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-header">开发环境</div>
        <div class="layui-card-body">
          Tag 标签组件
        </div>
      </div>
    </div>

    <div class="layui-col-md12">
      <div class="layui-collapse">
        <div class="layui-colla-item">
          <h2 class="layui-colla-title">显示代码</h2>
          <div class="layui-colla-content">
            <pre class="layui-code" lay-encode="true">
              <link rel="stylesheet" href="component/pear/css/pear.css" />
              并
              <script src="component/layui/layui.js"></script>
              并
              <script src="component/pear/pear.js"></script>
            </pre>
          </div>
        </div>
      </div>
    </div>
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-header">主题风格</div>
        <div class="layui-card-body">
          <div class="layui-btn-container tag">
            <button lay-id="11" type="button" class="tag-item tag-item-normal">网站设置</button>
            <button lay-id="22" type="button" class="tag-item">用户管理</button>
            <button lay-id="33" type="button" class="tag-item tag-item-warm">权限分配</button>
            <button lay-id="44" type="button" class="tag-item tag-item-danger">商品管理</button>
          </div>
        </div>
      </div>
    </div>
    <div class="layui-col-md12">
      <div class="layui-collapse">
        <div class="layui-colla-item">
          <h2 class="layui-colla-title">显示代码</h2>
          <div class="layui-colla-content">
            <pre class="layui-code" lay-encode="true">
              <div class="layui-btn-container tag">
                <button lay-id="11" type="button" class="tag-item tag-item-normal">网站设置</button>
                <button lay-id="22" type="button" class="tag-item">用户管理</button>
                <button lay-id="33" type="button" class="tag-item tag-item-warm">权限分配</button>
                <button lay-id="44" type="button" class="tag-item tag-item-danger">商品管理</button>
              </div>
            </pre>
          </div>
        </div>
      </div>
    </div>
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-header">动态操作</div>
        <div class="layui-card-body">
          <div class="layui-btn-container tag" lay-filter="demo" lay-allowclose="true" lay-newTag="true">
            <button lay-id="11" type="button" class="tag-item tag-item-normal">网站设置</button>
            <button lay-id="22" type="button" class="tag-item">用户管理</button>
            <button lay-id="33" type="button" class="tag-item tag-item-warm">权限分配</button>
            <button lay-id="44" type="button" class="tag-item tag-item-danger">商品管理</button>
          </div>
        </div>
      </div>
    </div>
    <div class="layui-col-md12">
      <div class="layui-collapse">
        <div class="layui-colla-item">
          <h2 class="layui-colla-title">显示代码</h2>
          <div class="layui-colla-content">
            <pre class="layui-code" lay-encode="true">
              tag.add('demo', {text: '新选项',id: 12})

              tag.delete('demo', '44');
            </pre>
          </div>
        </div>
      </div>
    </div>
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-header">圆角风格</div>
        <div class="layui-card-body">
          <div class="layui-btn-container tag" lay-filter="test" lay-newTag="true">
            <button lay-id="11" type="button" class="tag-item">网站设置</button>
            <button lay-id="22" type="button" class="tag-item">用户管理</button>
            <button lay-id="33" type="button" class="tag-item">权限分配</button>
            <button lay-id="44" type="button" class="tag-item">商品管理</button>
            <button lay-id="55" type="button" class="tag-item">订单管理</button>
          </div>
        </div>
      </div>
    </div>
    <div class="layui-col-md12">
      <div class="layui-collapse">
        <div class="layui-colla-item">
          <h2 class="layui-colla-title">显示代码</h2>
          <div class="layui-colla-content">
            <pre class="layui-code" lay-encode="true">
              <div class="layui-btn-container tag" lay-filter="test" lay-newTags="true">
                <button lay-id="11" type="button" class="tag-item">网站设置</button>
                <button lay-id="22" type="button" class="tag-item">用户管理</button>
                <button lay-id="33" type="button" class="tag-item">权限分配</button>
                <button lay-id="44" type="button" class="tag-item">商品管理</button>
                <button lay-id="55" type="button" class="tag-item">订单管理</button>
              </div>
            </pre>
          </div>
        </div>
      </div>
    </div>
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-header">删除功能</div>
        <div class="layui-card-body">
          <div class="layui-btn-container tag" lay-allowclose="true">
            <button lay-id="11" type="button" class="tag-item tag-item-danger">网站设置</button>
            <button lay-id="22" type="button" class="tag-item tag-item-danger">用户管理</button>
            <button lay-id="33" type="button" class="tag-item tag-item-danger">权限分配</button>
            <button lay-id="44" type="button" class="tag-item tag-item-danger">商品管理</button>
            <button lay-id="55" type="button" class="tag-item tag-item-danger">订单管理</button>
          </div>
        </div>
      </div>
    </div>
    <div class="layui-col-md12">
      <div class="layui-collapse">
        <div class="layui-colla-item">
          <h2 class="layui-colla-title">显示代码</h2>
          <div class="layui-colla-content">
            <pre class="layui-code" lay-encode="true">
              <div class="layui-btn-container tag" lay-allowclose="true">
                <button lay-id="11" type="button" class="tag-item tag-item-danger">网站设置</button>
                <button lay-id="22" type="button" class="tag-item tag-item-danger">用户管理</button>
                <button lay-id="33" type="button" class="tag-item tag-item-danger">权限分配</button>
                <button lay-id="44" type="button" class="tag-item tag-item-danger">商品管理</button>
              </div>

              tag.on('delete(demo)', function(data) {
              console.log('删除');
              console.log(this);
              console.log(data.index);
              console.log(data.elem);
              console.log(data.othis);
              });
            </pre>
          </div>
        </div>
      </div>
    </div>
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-header">新建功能</div>
        <div class="layui-card-body">
          <div class="layui-btn-container tag" lay-newTag="true">
            <button lay-id="11" type="button" class="tag-item">网站设置</button>
            <button lay-id="22" type="button" class="tag-item">用户管理</button>
            <button lay-id="33" type="button" class="tag-item">权限分配</button>
            <button lay-id="44" type="button" class="tag-item">商品管理</button>
          </div>
        </div>
      </div>
    </div>
    <div class="layui-col-md12">
      <div class="layui-collapse">
        <div class="layui-colla-item">
          <h2 class="layui-colla-title">显示代码</h2>
          <div class="layui-colla-content">
            <pre class="layui-code" lay-encode="true">
              <div class="layui-btn-container tag" lay-newTags="true">
                <button lay-id="11" type="button" class="tag-item">网站设置</button>
                <button lay-id="22" type="button" class="tag-item">用户管理</button>
                <button lay-id="33" type="button" class="tag-item">权限分配</button>
                <button lay-id="44" type="button" class="tag-item">商品管理</button>
              </div>

              tag.on('add(demo)', function(data) {
              console.log('新建');
              console.log(this);
              console.log(data.index);
              console.log(data.elem);
              });
            </pre>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="../../component/layui/layui.js"></script>
  <script src="../../component/pear/pear.js"></script>
  <script>
    layui.use(['tag','code','element'],function() {
      var $=layui.jquery,
        tag=layui.tag; //Tag的切换功能，切换事件监听等，需要依赖tag模块

      layui.code();

      tag.render("test",{
        skin: 'layui-btn layui-btn-primary layui-btn-sm layui-btn-radius', //标签样式
        tagText: '<i class="layui-icon layui-icon-add-1"></i>添加标签' //标签添加按钮提示文本
      });

      var active={
        tagAdd: function() {
          //新增一个Tag项
          tag.add('demo',{
            text: '新选项'+(Math.random()*1000|0) //用于演示
            ,
            id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
          })
        },
        tagDelete: function(othis) {
          //删除指定Tag项
          tag.delete('demo','44'); //删除：“商品管理”
          othis.addClass('layui-btn-disabled');
        }
      };

      $('.site-demo-active').on('click',function() {
        var othis=$(this),
          type=othis.data('type');
        active[type]? active[type].call(this,othis):'';
      });

      tag.on('click(demo)',function(data) {
        console.log('点击');
        console.log(this); //当前Tag标签所在的原始DOM元素
        console.log(data.index); //得到当前Tag的所在下标
        console.log(data.elem); //得到当前的Tag大容器
      });

      tag.on('add(demo)',function(data) {
        console.log('新增');
        console.log(this); //当前Tag标签所在的原始DOM元素
        console.log(data.index); //得到当前Tag的所在下标
        console.log(data.elem); //得到当前的Tag大容器
        console.log(data.othis); //得到新增的DOM对象
        //return false; //返回false 取消新增操作； 同from表达提交事件。
      });

      tag.on('delete(demo)',function(data) {
        console.log('删除');
        console.log(this); //当前Tag标签所在的原始DOM元素
        console.log(data.index); //得到当前Tag的所在下标
        console.log(data.elem); //得到当前的Tag大容器
      });
    });
  </script>
</body>

</html>